<template>
    <a-spin :spinning="spinning">
        <div class="mainS">
            <div class="mainSt">访客数据统计</div>
            <div class="mainC" ref="CaseRef"></div>
        </div>
    </a-spin>
</template>

<script>
import { httpAction, getAction, getFileAccessHttpUrl } from '@/api/manage'
export default {
    props: ['isAdmin', 'date', 'orgId'],
    data() {
        return {
            CaseRef: null,
            spinning: false,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.CaseRef = this.$echarts.init(this.$refs.CaseRef);
        });
    },
    watch: {
        orgId: {
            handler(val) {
                this.getData();
            },
            immediate: true,
            deep: true,
        },
        date: {
            handler(val) {
                this.getData();
            },
            immediate: true,
            deep: true,
        }
    },
    methods: {
        getData() {
            this.spinning = true;
            if (this.isAdmin && !this.orgId) {
                getAction('/wz/statistics/findVisitorPie', { dateType: this.date, orgId: this.orgId }).then(res => {
                    this.pieInit(res.result)
                })
            } else {
                getAction('/wz/statistics/findVisitor', { dateType: this.date, orgId: this.orgId }).then(res => {
                    this.lineInit(res.result)
                })
            }
        },
        pieInit(data) {
            let _data = []
            data.map(i => {
                _data.push(
                    { value: i.valueInfo, name: i.keyInfo }
                )
            })
            let option = {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    type: 'scroll',
                    bottom: 0,
                    itemWidth: 20,
                    itemHeight: 10,
                    itemGap: 6,
                    icon: 'circle',
                    textStyle: {
                        color: '#004236',
                        fontSize: 13,
                    },
                    pageIconColor: '#004236',
                    pageIconInactiveColor: '#888',
                    left: 0,
                    pageTextStyle: {
                        color: '#004236',
                        fontSize: 13,
                    }
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                series: [
                    {
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 人次';
                            }
                        },
                        type: 'pie',
                        radius: ['50%', '80%'],
                        avoidLabelOverlap: false,
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 8
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                            }
                        },
                        labelLine: {
                            show: false
                        },

                        data: _data
                    }
                ]
            };
            this.CaseRef.clear()
            this.CaseRef.setOption(option)
            this.spinning = false
        },
        lineInit(data) {
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '10%',
                    left: '1%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xdata,
                    axisLine: {
                        lineStyle: {
                            color: "#333",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#004236",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        width: 80,
                        align: 'center',
                        color: '#004236',
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#004236",

                        }
                    },
                    axisLabel: {
                        formatter: '{value} 人次',
                        color: '#004236'
                    }
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#077762cc' },
                                    { offset: 1, color: '#07776299' }
                                ]
                            )
                        },
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 人次';
                            }
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#07776255'
                                },
                                {
                                    offset: 1,
                                    color: '#07776222'
                                }
                            ])
                        },
                        data: data.ydata
                    }
                ]
            };

            this.CaseRef.clear()
            this.CaseRef.setOption(option)
            this.spinning = false
        }

    },

}
</script>

<style lang="less" scoped>
.mainS {
    width: 930px;
    height: 360px;
    border-radius: 12px;
    padding: 15px 30px;
    background-color: #ffffffcc;
    box-shadow: 0 0 12px #ccc;
    margin-right: 30px;

    .mainSt {
        font-size: 20px;
        color: #004236;
        letter-spacing: 5px;
        width: 100%;
        height: 36px;
        line-height: 36px;
        display: flex;
        align-items: center;

        &::before {
            margin-left: -10px;
            margin-right: 10px;
            content: '';
            width: 6px;
            height: 30px;
            background: #077762;
            border-radius: 3px;
            display: inline-block;
        }
    }

    .mainC {
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        align-items: center;
        justify-content: space-around;

    }
}
</style>